<template>
    <div>
        <m-table :columns="columns" :data="roleList" :title="$route.meta.title">
            <template #extra>
                <a-button v-perms="['/adminapi/system.auth.role/save']" type="primary" shape="round" @click="handleEdit('add')">
                    <template #icon>
                        <icon-plus />
                    </template>
                </a-button>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-button v-perms="['/adminapi/system.auth.role/update']" type="primary" shape="round" @click="handleEdit('edit', record)">
                        <template #icon>
                            <icon-edit />
                        </template>
                    </a-button>
                    <a-popconfirm :content="`确定删除 [${record.name}] 吗？ 如果存在子级,请先删除子级`" @ok="handleDelete(record)">
                        <a-button v-perms="['/adminapi/system.auth.role/delete']" shape="round" type="primary" status="danger">
                            <template #icon>
                                <icon-delete />
                            </template>
                        </a-button>
                    </a-popconfirm> 
                </a-space>
            </template>


            <template #status="{ record }">
                <a-tag v-if="record.status == 1" color="green">启用</a-tag>
                <a-tag v-else color="red">禁用</a-tag>
            </template>

            <template #permission="{ record }">
                <a-button v-perms="['/adminapi/system.auth.role/setAuth']" type="primary" shape="round" @click="handleAuth(record)">
                    <template #icon>
                        <icon-edit />
                    </template>
                </a-button>
            </template>
        </m-table>

        <edit-modal ref="editModal" @success="run" />

        <auth-modal ref="authModal" @success="run({})" />
    </div>
</template>

<script setup lang="ts">
import { getRoleList, deleteRole } from '@/api/system/auth/role'
import { useRequest } from 'vue-request'
import EditModal from './components/edit.vue'
import AuthModal from './components/auth.vue'

const { data: roleList, run } = useRequest(getRoleList)

const editModal = ref<InstanceType<typeof EditModal>>()
const authModal = ref<InstanceType<typeof AuthModal>>()

const handleEdit = (type: string, record?: any) => {
    editModal.value?.open(type)
    if (record) {
        // 等待弹窗打开后再设置数据
        nextTick(() => {
            editModal.value?.setFormData(record)
        })
    }
}

const handleDelete = async (record: any) => {
    await deleteRole(record.id)
    run({})
}

const handleAuth = (record: any) => {
    authModal.value?.open()
    if (record) {
        // 等待弹窗打开后再设置数据
        nextTick(() => {
            authModal.value?.setFormData(record)
        })
    }
}

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 80,
    },
    {
        title: '角色名称',
        dataIndex: 'name',
        width: 180,
    },
    {
        title: '角色描述',
        dataIndex: 'description',
    },
    {
        title: '状态',
        dataIndex: 'status',
        width: 100,
        slotName: 'status',
    },
    {
        title: '权限',
        dataIndex: 'permission',
        width: 100,
        slotName: 'permission',
    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        minWidth: 180,
        // slotName: 'created_at',
    },
    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 150,
        slotName: 'action',
    },
]

const data = computed(() => {
    const data = []
    for (let i = 0; i < 10000; i++) {
        data.push({
            name: `管理员${i}`,
        })
    }
    return data
})
</script>
